<template>
  <!-- 考勤打卡 -->
  <div class="index">
    <!-- 用户信息 -->
    <div class="head">
      <div class="head_box flex-row" style="justify-content: left; display: flex; position: relative">
        <!-- <div class="user_ava">
          <open-data type="userAvatarUrl"></open-data>
          <div class="avatar">{{ nickName }}</div>
        </div> -->
        <div>
          <div class="user_name">
            <!-- {{ nickName }}{{ "[" + department + "]" }} -->
            <!-- <div class="content">{{ department }}</div> -->
            <div class="content">{{ nickName }}</div>
            <!-- <span class="content2">{{ tip }}</span> -->
          </div>
          <div class="user_add">新的一天开始了，加油哦~</div>
        </div>
        <div class="mealBtn" @click="jumpKaoQin">
          <image src="../../static/icon/kaoqin.png" />
          <div class="mealText">{{ "考勤" }}</div>
        </div>
      </div>
    </div>
    <div class="contentBox">
      <!-- 打卡记录 -->
      <view class="box">
        <scroll-view scroll-x="true" class="scroll" enhanced :show-scrollbar="false">
          <div class="box1">
            <div class="item" v-for="(item, index) in checkList" :key="index">
              <span style="font-size: 30rpx">{{ item.title + "时间" }}</span>
              <span class="text-green">{{ item.date }}</span>
              <div class="icon" v-if="item.datecheck">
                <div class="correct">
                  <img src="../../../static/icon/correct.png" />
                </div>
                <div>
                  {{ item.datecheck }}
                </div>
              </div>
              <div class="noCheck" v-else>未打卡</div>
            </div>
          </div>
        </scroll-view>
      </view>
      <div class="dateInfo">
        <p>{{ nowDate }} {{ nowDay }}</p>
      </div>
      <!-- 打卡按钮 -->
      <div class="c_clock flex-column">
        <div :class="[
            'clock_time',
            'flex-column',
            'j_c',
            status == 1 ? 'c1' : '',
            is_out == 2 ? 'outArea' : '',
            circledata == '无法打卡' ? 'clock_time2' : 'clock_time',
          ]" @click="clickcheck">
          <div v-if="circledata">
            <p>{{ circledata }}</p>
            <p>{{ hours }}:{{ minutes }}:{{ seconds }}</p>
          </div>
          <p v-else>
            <van-loading type="spinner" color="#fff" vertical>
              <view style="color: #fff; font-size: 24rpx">信息获取中，请稍候</view>
            </van-loading>
          </p>
        </div>
        <div :class="[
            'clock_time_over',
            'flex-column',
            'j_c',
            status == 1 ? 'c2' : '',
          ]">
          <p>已打卡</p>
          <p>{{ hours }}:{{ minutes }}:{{ seconds }}</p>
        </div>
      </div>
      <!-- 打卡地址 -->
      <div class="clock_address" v-if="normalcircle">
        <img v-if="addresscheck" class="add_icon" src="../../../static/icon/correct.png" />
        <!-- <span v-if="addresscheck">已进入考勤范围：{{ addresscheck }}</span> -->
        <span v-if="addresscheck">已进入考勤范围</span>
      </div>
      <div class="clock_address" v-else>
        <img class="add_icon" src="../../../static/icon/address.png" />
        <!-- <span>{{ address }}</span> -->
        <span>当前地址不在考勤范围</span>
      </div>
    </div>
    <van-dialog id="van-dialog" />
    <!-- <van-overlay :show="overlayShow">
      <view class="wrapper">
        <van-loading color="#ffffff" size="50px" vertical
          >正在获取定位信息及打卡信息，请稍候</van-loading
        >
      </view>
    </van-overlay> -->
  </div>
</template>

<script>
  import {
    checkPosition,
    save,
    queryDay,
    getUserInfo,
    checkWhiteList,
    searchHoliday,
  } from "@/utils/api/check.js";
  import forMat from "@/utils/check.js";
  import QQMapWX from "../../../static/qqmap/qqmap-wx-jssdk.min";
  import moment from "moment";
  import Dialog from "../../../static/vant/dialog/dialog";
  export default {
    data() {
      return {
        nowDate: "",
        nowDay: "",
        tip: "",
        nickName: "",
        department: "",
        checkList: [
          // {
          //   title: "上班",
          //   check: false,
          //   date: "",
          //   datecheck: "",
          // },
          // {
          //   title: "下班",
          //   check: false,
          //   date: "",
          //   datecheck: "",
          // },
        ],
        normalcircle: true,
        check: true,
        circledata: "",
        date: "16:20:48",
        dateCheck: "",
        addressflag: true,
        addresscheck: "",
        longitude: "", //经度
        latitude: "", //纬度
        address: "", //地址
        dkState: "", //打卡状态
        dkType: "", //打卡类型
        configId: "", //配置id
        currentTime: new Date(), // 初始化为当前时间
        status: 0,
        upHour: "",
        upMinute: "",
        downHour: "",
        downMinute: "",
        upSecondRandomNum: 0,
        downSecondRandomNum: 0,
        upMinuteRandomNum: 0,
        downMinuteRandomNum: 0,
        openId: "",
        isWeekDay: false, //是否为工作日
        isAutoCheck: false, //是否为打卡白名单
        arr: [
          ["workStart", "workEnd"],
          ["workStartTwo", "workEndTwo"],
          ["workStartThree", "workEndThree"],
          ["workStartFour", "workEndFour"],
          ["workStartFive", "workEndFive"],
          ["workStartSix", "workEndSix"],
        ],
        dkDeploy: "",
        isClasses: "",
        dkLunGang: "",
        // overlayShow: false,
      };
    },
    computed: {
      hours() {
        const hour = this.currentTime.getHours();
        if (hour < 10) {
          return "0" + hour; // 补零操作
        } else {
          return hour;
        }
      },
      minutes() {
        const minute = this.currentTime.getMinutes();
        if (minute < 10) {
          return "0" + minute; // 补零操作
        } else {
          return minute;
        }
      },
      seconds() {
        const second = this.currentTime.getSeconds();
        if (second < 10) {
          return "0" + second; // 补零操作
        } else {
          return second;
        }
      },
    },
    onShow() {
      let usercode = wx.getStorageSync("usercode"); // 获取
      //是否为周末和节假日
      this.isWeekAndHoilday();
      // 是否在白名单
      this.checkWhiteList({
        userCode: usercode,
      });
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        userCode: usercode,
      };
      this.getUserInfo(queryParams);
      this.nowDateAndDayAndTip();
      setInterval(() => {
        this.updateCurrentTime();
      }, 1000);
      this.handleLogin();
    },
    onPullDownRefresh() {
      // console.log("我正在下拉刷新"); //用于测试下拉刷新
      // wx.stopPullDownRefresh(); //调用微信停止下拉刷新的函数
      if (this.isAutoCheck === true) {
        this.autoReset();
      } else if (this.isAutoCheck === false) {
        this.noAutoReset();
      }
    },
    methods: {
      //获取opedid
      handleLogin() {
        wx.login({
          success(res) {
            if (res.code) {
              console.log();
              wx.request({
                url: "https://www.openrzcl.com/prod-out-api/weChat/getAccessToken",
                data: {
                  code: res.code,
                },
                header: {
                  "content-type": "application/json",
                  Authorization: wx.getStorageSync("token"),
                },
                success(res) {
                  this.openId = res.data.openid;
                },
              });
            } else {
              console.log("登录失败！" + res.errMsg);
            }
          },
        });
      },
      // 判断是否为周末和节假日
      isWeekAndHoilday() {
        let data = {
          pageSize: "365",
          pageNum: "1",
          startTime: moment().format("YYYY-MM-DD HH"),
          endTime: moment().format("YYYY-MM-DD HH"),
        };
        this.searchHoliday(data);
      },
      // 1-60/1-5随机数
      getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      // 查询今日日期及星期
      nowDateAndDayAndTip() {
        this.nowDate = forMat.formatTime(new Date());
        this.nowDay = forMat.formatDay(new Date());
        this.tip = forMat.formatSole();
      },
      // 指定时间自动查询打卡状态及位置
      autoReset() {
        this.upSecondRandomNum = this.getRandomNumber(1, 55); //上班秒数提前时间按
        this.downSecondRandomNum = this.getRandomNumber(1, 55); //下班秒数延迟时间按
        this.upMinuteRandomNum = this.getRandomNumber(1, 19); //上班分钟提前时间
        this.downMinuteRandomNum = this.getRandomNumber(1, 10); //下班分钟延迟时间
        this.autoGetLocation();
      },
      // 不自动-指定时间自动查询打卡状态及位置
      noAutoReset() {
        this.getLocation();
      },
      jumpKaoQin() {
        wx.navigateTo({
          url: "/pages/kaoqin/main",
        });
      },
      updateCurrentTime() {
        this.currentTime = new Date();
      },
      //点击打卡按钮
      clickcheck() {
        Dialog.confirm({
          title: "是否打卡",
          message: "请您确认是否打卡",
        })
          .then(() => {
            if (this.dkType === '1') {
              this.save({
                dkJd: this.longitude,
                dkWd: this.latitude,
                dkWzmc: "",
                dkState: this.dkState,
                dkType: this.dkType,
                configId: this.configId,
                dkDeploy: this.dkDeploy,
              });
            } else if (this.dkType === '2') {
              wx.showToast({
                title: `当前未在打卡范围，请移动至打卡点位或填写异常情况审批表`,
                icon: "none",
              });
            }
          })
          .catch(() => {
            wx.showToast({
              title: `取消打卡`,
              icon: "none",
            });
          });
      },
      // 自动-获取经纬度
      autoGetLocation() {
        wx.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          success: (res) => {
            let qqmapsdk = new QQMapWX({
              // key: "GZ5BZ-OAXED-DNM4H-HMVLD-5BIXO-XFBMX",
              key: "PVDBZ-WSNKI-JFIGK-UBGZT-XRLK5-UCBZC",
            });
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            let data = {
              latitude: this.latitude,
              longitude: this.longitude,
            };
            this.autoCheckPosition(data);
            // qqmapsdk.reverseGeocoder({
            //   location: data,
            //   success: (res) => {
            //     // console.log(res.result.address, "详细地址信息"); //这里边就是你需要的定位数据了
            //     this.address = res.result.address;
            //   },
            //   fail: (res) => {
            //     console.log(res, "失败信息");
            //   },
            // });
          },
        });
      },
      // 不自动-获取经纬度
      getLocation() {
        wx.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          success: (res) => {
            let qqmapsdk = new QQMapWX({
              // key: "GZ5BZ-OAXED-DNM4H-HMVLD-5BIXO-XFBMX",
              key: "PVDBZ-WSNKI-JFIGK-UBGZT-XRLK5-UCBZC",
            });
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            let data = {
              latitude: this.latitude,
              longitude: this.longitude,
            };
            this.checkPosition(data);
            // qqmapsdk.reverseGeocoder({
            //   location: data,
            //   success: (res) => {
            //     // console.log(res.result.address, "详细地址信息"); //这里边就是你需要的定位数据了
            //     this.address = res.result.address;
            //   },
            //   fail: (res) => {
            //     console.log(res, "失败信息");
            //   },
            // });
          },
        });
      },
      // 上班定时
      goToWorkTask(hour, minute) {
        // console.log("上班定时打卡调用了");
        // 获取当前时间
        const now = new Date();
        // 这里设置刷新时间为每天固定时间（例如 08:00:00）
        const refreshTime = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          hour,
          minute,
          this.upSecondRandomNum
        );
        // 计算当前时间距离刷新时间的时间间隔（以毫秒为单位）
        // const timeUntilRefresh = refreshTime - now;
        // // 如果当前时间已经超过刷新时间，则将刷新时间设置为明天的同一时间
        // if (timeUntilRefresh < 0) {
        //   refreshTime.setDate(refreshTime.getDate() + 1);
        // }
        if (this.checkList[0].check) {
          refreshTime.setDate(refreshTime.getDate() + 1);
        }
        console.log(refreshTime - Date.now(), "上班自动打卡倒计时");
        // console.log(refreshTime - Date.now(), "定时任务，每天定时获取数据");
        // 设置定时任务，每天固定时间执行刷新数据函数
        if (refreshTime - Date.now() > 0) {
          const timer = setInterval(() => {
            // 还未打上班卡并且当前地址在考勤范围内
            if (this.checkList[0].check === false && this.dkType === "1") {
              // 时间到处理你的方法
              this.goToWorkFunction();
              //这里记得清除一下定时器，后面说明原因
              clearInterval(timer);
            }
          }, refreshTime - Date.now());
        }
      },
      // 上班任务
      goToWorkFunction() {
        // 这里处理数据;
        if (this.isWeekDay === true) {
          if (this.dkType === '1') {
            this.save({
              dkJd: this.longitude,
              dkWd: this.latitude,
              dkWzmc: "",
              dkState: this.dkState,
              dkType: this.dkType,
              configId: this.configId,
              dkDeploy: this.dkDeploy,
            });
          } else if (this.dkType === '2') {
            wx.showToast({
              title: `当前未在打卡范围，请移动至打卡点位或填写异常情况审批表`,
              icon: "none",
            });
          }
        }
      },
      // 下班定时
      afterWorkTask(hour, minute) {
        // console.log("下班定时打卡调用了");
        // 获取当前时间
        const now = new Date();
        // 这里设置刷新时间为每天固定时间（例如 08:00:00）
        const refreshTime = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          hour,
          minute,
          this.downSecondRandomNum
        );
        // 计算当前时间距离刷新时间的时间间隔（以毫秒为单位）
        // const timeUntilRefresh = refreshTime - now;
        // // 如果当前时间已经超过刷新时间，则将刷新时间设置为明天的同一时间
        // if (timeUntilRefresh < 0) {
        //   refreshTime.setDate(refreshTime.getDate() + 1);
        // }
        if (this.checkList[1].check) {
          refreshTime.setDate(refreshTime.getDate() + 1);
        }
        console.log(refreshTime - Date.now(), "下班自动打卡倒计时");
        // console.log(refreshTime - Date.now(), '定时任务，每天定时获取数据');
        // 设置定时任务，每天固定时间执行刷新数据函数
        if (refreshTime - Date.now() > 0) {
          const timer = setInterval(() => {
            // 还未打下班卡并且当前地址在考勤范围内
            if (this.checkList[1].check === false && this.dkType === "1") {
              // 时间到处理你的方法
              this.afterWorkFunction();
              //这里记得清除一下定时器，后面说明原因
              clearInterval(timer);
            }
          }, refreshTime - Date.now());
        }
      },
      // 下班任务
      afterWorkFunction() {
        // 这里处理数据;
        if (this.isWeekDay === true) {
          if (this.dkType === '1') {
            this.save({
              dkJd: this.longitude,
              dkWd: this.latitude,
              dkWzmc: "",
              dkState: this.dkState,
              dkType: this.dkType,
              configId: this.configId,
              dkDeploy: this.dkDeploy,
            });
          } else if (this.dkType === '2') {
            wx.showToast({
              title: `当前未在打卡范围，请移动至打卡点位或填写异常情况审批表`,
              icon: "none",
            });
          }
        }
      },
      // 上班提前打卡时间
      subtractAddMinutes(hours, minutes, subtractMinutes) {
        let totalMinutes = hours * 60 + minutes - subtractMinutes;
        let hoursRemainder = totalMinutes % 60;
        let minutesRemainder = totalMinutes - hoursRemainder;
        let newHours = Math.floor(minutesRemainder / 60);
        let newMinutes = hoursRemainder;
        return { hours: newHours, minutes: newMinutes };
      },
      // 下班延迟打卡时间
      subtractReduceMinutes(hours, minutes, subtractMinutes) {
        let totalMinutes = hours * 60 + minutes + subtractMinutes;
        let hoursRemainder = totalMinutes % 60;
        let minutesRemainder = totalMinutes - hoursRemainder;
        let newHours = Math.floor(minutesRemainder / 60);
        let newMinutes = hoursRemainder;
        return { hours: newHours, minutes: newMinutes };
      },
      // 查询是否为白名单
      async checkWhiteList(data) {
        try {
          let res = await checkWhiteList(data);
          if (res.code == 200) {
            this.isAutoCheck = res.data[0].exist;
          }
          if (this.isAutoCheck === true) {
            this.autoReset();
          } else if (this.isAutoCheck === false) {
            this.noAutoReset();
          }
        } catch (error) {
          console.log(error);
        }
      },
      //查询是否为假期
      async searchHoliday(data) {
        try {
          let result = await searchHoliday(data);
          if (result.code == 200) {
            if (result.data[0].type === "1") {
              //工作日
              this.isWeekDay = true;
            }
          }
        } catch (error) {
          console.log(error);
        }
      },
      // 自动-判断当前位置审核状态
      async autoCheckPosition(data) {
        this.checkList = [];
        try {
          let res = await checkPosition(data);
          if (res.code == 200) {
            this.dkState = res.data.dkStatus; //打卡类型 1 上班打卡 2 下班打卡
            this.dkType = res.data.dkType; //打卡状态 1 正常打卡 2 外勤打卡
            this.configId = res.data.configBase.id;
            this.dkDeploy = res.data.dkDeploy;
            this.isClasses = res.data.configBase.isClasses;
            this.dkLunGang = res.data.configBase.dkLungang;
            for (let i = 0; i < Number(res.data.configBase.dkBanci); i++) {
              if (
                res.data.configBase[this.arr[i][0]] &&
                res.data.configBase[this.arr[i][1]]
              ) {
                this.checkList.push(
                  {
                    title: "上班",
                    check: false,
                    date: res.data.configBase[this.arr[i][0]],
                    datecheck: "",
                  },
                  {
                    title: "下班",
                    check: false,
                    date: res.data.configBase[this.arr[i][1]],
                    datecheck: "",
                  }
                );
              }
            }
            if (this.isClasses === "0" || this.isClasses === "1") {
              this.autoQueryDay({
                // dkTime: moment().format("YYYY-MM-DD"),
                isClasses: this.isClasses,
                dkDeploy: this.dkDeploy,
              });
            } else {
              this.autoQueryDay({
                // dkTime: moment().format("YYYY-MM-DD"),
                isClasses: this.isClasses,
                dkLunGang: this.dkLunGang,
                dkDeploy: this.dkDeploy,
              });
            }
            if (res.data.dkType == 1) {
              this.normalcircle = true;
              this.addresscheck = res.data.configBase.attendPosition;
              this.circledata = res.data.dkStatus == 1 ? "上班打卡" : "下班打卡";
            } else {
              this.normalcircle = false;
              this.circledata = "无法打卡";
            }
          } else if (res.code == 401) {
            Dialog.confirm({
              title: "重新登录",
              message: "当前身份信息已过期，请重新登录",
            })
              .then(() => {
                wx.clearStorage({
                  success: function (res) {
                    wx.redirectTo({
                      url: "/pages/login/main",
                    });
                  },
                });
              })
              .catch(() => {
                wx.showToast({
                  title: `已取消，请手动退出登录并重新登录`,
                  icon: "none",
                });
              });
          } else {
            wx.showToast({
              title: res.msg,
              icon: "none",
            });
          }
          wx.stopPullDownRefresh(); //调用微信停止下拉刷新的函数
        } catch (error) {
          console.log(error);
        }
      },
      // 不自动-判断当前位置审核状态
      async checkPosition(data) {
        this.checkList = [];
        // this.overlayShow = true;
        try {
          let res = await checkPosition(data);
          if (res.code == 200) {
            // this.overlayShow = false;
            this.dkState = res.data.dkStatus; //打卡类型 1 上班打卡 2 下班打卡
            this.dkType = res.data.dkType; //打卡状态 1 正常打卡 2 外勤打卡
            this.configId = res.data.configBase.id;
            this.dkDeploy = res.data.dkDeploy;
            this.isClasses = res.data.configBase.isClasses;
            this.dkLunGang = res.data.configBase.dkLungang;
            for (let i = 0; i < Number(res.data.configBase.dkBanci); i++) {
              if (
                res.data.configBase[this.arr[i][0]] &&
                res.data.configBase[this.arr[i][1]]
              ) {
                this.checkList.push(
                  {
                    title: "上班",
                    check: false,
                    date: res.data.configBase[this.arr[i][0]],
                    datecheck: "",
                  },
                  {
                    title: "下班",
                    check: false,
                    date: res.data.configBase[this.arr[i][1]],
                    datecheck: "",
                  }
                );
              }
            }
            if (this.isClasses === "0" || this.isClasses === "1") {
              this.queryDay({
                dkTimeDay: moment().format("YYYY-MM-DD"),
                isClasses: this.isClasses,
                dkDeploy: this.dkDeploy,
              });
            } else {
              this.queryDay({
                dkTimeDay: moment().format("YYYY-MM-DD"),
                isClasses: this.isClasses,
                dkLunGang: this.dkLunGang,
                dkDeploy: this.dkDeploy,
              });
            }
            if (res.data.dkType == 1) {
              this.normalcircle = true;
              this.addresscheck = res.data.configBase.attendPosition;
              this.circledata = res.data.dkStatus == 1 ? "上班打卡" : "下班打卡";
            } else {
              this.normalcircle = false;
              this.circledata = "无法打卡";
            }
          } else if (res.code == 401) {
            Dialog.confirm({
              title: "重新登录",
              message: "当前身份信息已过期，请重新登录",
            })
              .then(() => {
                wx.clearStorage({
                  success: function (res) {
                    wx.navigateTo({
                      url: "/pages/login/main",
                    });
                  },
                });
              })
              .catch(() => {
                wx.showToast({
                  title: `已取消，请手动退出登录并重新登录`,
                  icon: "none",
                });
              });
          } else {
            wx.showToast({
              title: res.msg,
              icon: "none",
            });
          }
          wx.stopPullDownRefresh(); //调用微信停止下拉刷新的函数
        } catch (error) {
          console.log(error);
        }
      },
      // 查询当前用户今日打卡记录
      async queryDay(data) {
        try {
          let res = await queryDay(data);
          let arr1 = [];
          if (res.code == 200) {
            res.data.forEach((item, index) => {
              if (item.up) {
                arr1.push(item.up.dkTime.slice(11, 16));
              }
              if (item.down) {
                arr1.push(item.down.dkTime.slice(11, 16));
              }
            });
            arr1.forEach((item, index) => {
              if (index % 2 === 0) {
                this.checkList[index].datecheck = item + "已打卡";
                this.checkList[index].check = true;
              } else if (index % 2 === 1) {
                this.checkList[index].datecheck = item + "已打卡";
                this.checkList[index].check = true;
              }
            });
          }
        } catch (error) {
          wx.showToast({
            title: error,
            icon: "none",
          });
        }
      },
      // 自动-查询当前用户今日打卡记录
      async autoQueryDay(data) {
        try {
          let res = await queryDay(data);
          let arr1 = [];
          if (res.code == 200) {
            res.data.forEach((item, index) => {
              if (item.up) {
                arr1.push(item.up.dkTime.slice(11, 16));
              }
              if (item.down) {
                arr1.push(item.down.dkTime.slice(11, 16));
              }
            });
            arr1.forEach((item, index) => {
              if (index % 2 === 0) {
                this.checkList[index].datecheck = item + "已打卡";
                this.checkList[index].check = true;
              } else if (index % 2 === 1) {
                this.checkList[index].datecheck = item + "已打卡";
                this.checkList[index].check = true;
              }
            });
            if (Number(this.checkList[0].date.slice(0, 2)) < 10) {
              this.upHour = Number(this.checkList[0].date.slice(1, 2));
            } else {
              this.upHour = Number(this.checkList[0].date.slice(0, 2));
            }
            if (Number(this.checkList[0].date.slice(3, 5)) < 10) {
              this.upMinute = Number(this.checkList[0].date.slice(4, 5));
            } else {
              this.upMinute = Number(this.checkList[0].date.slice(3, 5));
            }
            let newTime = this.subtractAddMinutes(
              this.upHour,
              this.upMinute,
              this.upMinuteRandomNum // 减去5分钟
            );
            this.goToWorkTask(newTime.hours, newTime.minutes);
            // this.checkList[1].date = res.data.configBase.workEnd;
            if (Number(this.checkList[1].date.slice(0, 2)) < 10) {
              this.downHour = Number(this.checkList[1].date.slice(1, 2));
            } else {
              this.downHour = Number(this.checkList[1].date.slice(0, 2));
            }
            if (Number(this.checkList[1].date.slice(3, 5)) < 10) {
              this.downMinute = Number(this.checkList[1].date.slice(4, 5));
            } else {
              this.downMinute = Number(this.checkList[1].date.slice(3, 5));
            }
            let newTime2 = this.subtractReduceMinutes(
              this.downHour,
              this.downMinute,
              this.downMinuteRandomNum // 加5分钟
            );
            if (this.checkList[0].check === true) {
              this.afterWorkTask(newTime2.hours, newTime2.minutes);
            }
          }
        } catch (error) {
          wx.showToast({
            title: error,
            icon: "none",
          });
        }
      },
      //点击打卡 保存
      async save(data) {
        try {
          let res = await save(data);
          if (res.code == 200) {
            this.status = 1;
            wx.showToast({
              title: "打卡成功",
              icon: "none",
            });
            setTimeout(() => {
              this.status = 0;
              this.handleLogin();
              if (this.isAutoCheck === true) {
                this.autoReset();
              } else if (this.isAutoCheck === false) {
                this.noAutoReset();
              }
            }, 2000);
          } else {
            wx.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        } catch (error) {
          wx.showToast({
            title: error,
            icon: "none",
          });
        }
      },
      //根据人员id获取人员详细信息
      async getUserInfo(data) {
        try {
          let result = await getUserInfo(data);
          if (result.code == 200) {
            (this.nickName = result.rows[0].nickName),
              (this.department = result.rows[0].dept.deptName);
          }
        } catch (error) {
          console.log(error);
        }
      },
    },
    watch: {
      hours(newV, oldV) {
        if (
          newV === "00" ||
          newV === "03" ||
          newV === "06" ||
          newV === "08" ||
          newV === 10 ||
          newV === 13 ||
          newV === 15 ||
          newV === 18 ||
          newV === 21
        ) {
          if (this.isAutoCheck === true) {
            this.isWeekAndHoilday();
            this.autoReset();
          } else if (this.isAutoCheck === false) {
            this.isWeekAndHoilday();
            this.noAutoReset();
          }
          this.nowDateAndDayAndTip();
        }
      },
    },
  };
</script>

<style scoped>
  .index {
    margin-top: 10px;
    background: #fff;
    height: calc(100vh - 10px);
  }

  .head {
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #e5e5e5;
  }

  .head_box {
    padding: 26rpx 28rpx 8px;
    width: 750rpx;
    box-sizing: border-box;
  }

  .user_ava {
    width: 116rpx;
    height: 116rpx;
    overflow: hidden;
    border-radius: 25%;
    margin-right: 32rpx;
  }

  .avatar {
    border-radius: 5px;
    width: 116rpx;
    height: 116rpx;
    background-color: #02a7f0;
    text-align: center;
    line-height: 116rpx;
    color: #fff;
    font-weight: 300;
  }

  .user_name {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 18rpx;
    display: -webkit-box;
  }

  .content {
    width: 350rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content2 {
    width: 20rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user_name span {
    font-size: 24rpx;
    color: #999999;
    font-weight: 400;
    margin-left: 40rpx;
  }

  .user_add {
    font-size: 28rpx;
    color: #3380f3;
  }

  .contentBox {
    padding: 44rpx 28rpx;
  }

  .signRecord {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 15px;
  }

  .dateInfo {
    text-align: center;
    position: relative;
    top: 50px;
    font-size: 35rpx;
  }

  .c_title {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 26rpx;
  }

  .c_section .c_item {
    position: relative;
    font-size: 30rpx;
    font-weight: 600;
    color: #333333;
    padding-left: 40rpx;
    margin-bottom: 110rpx;
  }

  .c_section p {
    color: #307ced;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80%;
    white-space: nowrap;
  }

  .c_section .c_item::before {
    content: "";
    position: absolute;
    width: 18rpx;
    height: 18rpx;
    border: 2rpx solid #999999;
    left: 0;
    top: 50%;
    margin-top: -9rpx;
    border-radius: 50%;
  }

  .c_section {
    position: relative;
  }

  .c_section .c_item::after {
    content: "";
    position: absolute;
    width: 2rpx;
    height: 178rpx;
    background: #e6e6e6;
    left: 10rpx;
    top: 34rpx;
  }

  .c_section div:last-child::after {
    display: none;
  }

  .start_lo {
    position: absolute;
    top: 30px;
    left: -5px;
  }

  .start_end {
    position: absolute;
    bottom: -108px;
    left: 20px;
  }

  .c_clock {
    margin: 180rpx auto 0;
    width: 350rpx;
    height: 380rpx;
    perspective: 1500;
    -webkit-perspective: 1500;
    -moz-perspective: 1500;
  }

  .clock_time {
    width: 350rpx;
    height: 350rpx;
    margin-bottom: 30rpx;
    position: absolute;
    transition: all 1s;
    backface-visibility: hidden;
  }

  .clock_time::after {
    content: "";
    top: 0;
    left: 0;
    width: 350rpx;
    height: 350rpx;
    border-radius: 50%;
    position: absolute;
    z-index: 9;
    background: rgba(48, 124, 237, 0.08);
    animation: scale 1s infinite alternate-reverse;
  }

  /* 已打卡 */
  .clock_time_over {
    width: 350rpx;
    height: 350rpx;
    margin-bottom: 30rpx;
    border-radius: 50%;
    background: rgba(48, 124, 237, 0.08);
    position: absolute;
    transition: all 1s;
    backface-visibility: hidden;
    transform: rotateY(-180deg);
  }

  .clock_time_over::after {
    position: absolute;
    z-index: 11;
    content: "";
    width: 320rpx;
    height: 320rpx;
    background: #c6ced9;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .clock_time_over p {
    position: relative;
    z-index: 13;
    color: #ffffff;
  }

  .clock_time_over p:first-child {
    font-size: 36rpx;
    margin-top: 120rpx;
    text-align: center;
  }

  .clock_time_over p:last-child {
    font-size: 35rpx;
    text-align: center;
    margin-top: 15rpx;
  }

  @keyframes scale {
    0% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  .clock_time::before {
    position: absolute;
    z-index: 11;
    content: "";
    width: 320rpx;
    height: 320rpx;
    background: rgb(48, 124, 237, 0.79);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* #58c18d */
  .clock_time2::before {
    position: absolute;
    z-index: 11;
    content: "";
    width: 320rpx;
    height: 320rpx;
    background: #ff4949;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .clock_time p {
    position: relative;
    z-index: 13;
    color: #ffffff;
  }

  .clock_time p:first-child {
    font-size: 36rpx;
    margin-top: 120rpx;
    text-align: center;
  }

  .clock_time p:last-child {
    font-size: 35rpx;
    text-align: center;
  }

  .clock_address {
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .clock_address span {
    vertical-align: middle;
  }

  .add_icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
    vertical-align: middle;
  }

  .refresh {
    margin-top: 25px;
    color: #307ced;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .now_location {
    font-size: 24rpx;
    color: #333333 !important;
  }

  .upload_box {
    width: 260rpx;
    height: 180rpx;
    background: #f5f5f8;
    border-radius: 5rpx;
  }

  .upload_box p {
    font-size: 20rpx;
    color: #999 !important;
    font-weight: 100;
  }

  .camera_icon {
    width: 42rpx;
    height: 44rpx;
    margin-bottom: 10rpx;
  }

  .clock_img {
    width: 100%;
    height: 100%;
  }

  .del_icon {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: -4px;
    top: -11rpx;
  }

  .ative::before {
    background: #307cedc9;
    border: 2rpx solid #307cedc9 !important;
  }

  .c1 {
    transform: rotateY(180deg);
  }

  .c1::after {
    animation: none !important;
  }

  .c2 {
    transform: rotateY(0deg);
  }

  .mealBtn {
    position: absolute;
    right: 70rpx;
    top: 45rpx;
  }

  .mealBtn image {
    width: 27px;
    height: 27px;
  }

  .mealText {
    font-size: 24rpx;
    color: #999;
  }

  .outArea::before {
    background: #f44336 !important;
  }

  .signInfo {
    width: 42%;
    background: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .signInfo p {
    float: inline-end;
  }

  .sign_address {
    display: flex;
    margin-top: 5px;
  }

  .sign_address div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    margin-top: 1px !important;
    color: #5f5a5a;
  }

  .text-green {
    color: #3380f3;
    margin-left: 95rpx;
    font-size: 30rpx;
  }

  .icon {
    display: flex;
    font-size: 13px;
    margin-top: 20rpx;
  }

  .noCheck {
    margin-top: 20rpx;
    color: #b8bab9;
    font-size: 13px;
    font-weight: bold;
  }

  .correct {
    width: 36rpx;
    height: 36rpx;
    text-align: center;
  }

  .correct img {
    width: 80%;
    height: 80%;
    text-align: center;
    vertical-align: middle;
  }

  .scroll {
    box-sizing: border-box;
    height: 185rpx;
  }

  .scroll .box1 {
    white-space: nowrap;
    margin-top: 40rpx;
  }

  .scroll .box1 .item {
    width: 305rpx;
    height: 100rpx;
    display: inline-block;
    margin-right: 10rpx;
    background: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
  }

  .scroll .box1 .item p {
    float: inline-end;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>